<script setup lang="ts">

import {useAccomp} from "../hooks/useAccomp.ts";

const {accomp} = useAccomp()

const {grade} = defineProps<{
  grade: number
}>()
</script>

<template>
  <div class="accomp-header-text">
    <el-text class="accomp-header-text-size">已解锁成就</el-text>
  </div>
  <div class="accomp-body-box">
    <div class="accomp-box" v-for="item in accomp">
      <div class="accomp-box-width accomp-img-box">
        <el-image :src="item.img">
        </el-image>
      </div>
      <div class="accomp-box-width">
        <el-text> LV {{ item.grade }} 特权</el-text>
      </div>
      <div class="accomp-box-width">
        <el-text>{{ item.text}}</el-text>
      </div>
      <div class="accomp-box-width">
        <el-text v-if="grade>=item.grade" class="having-text">已解锁</el-text>
        <el-text v-if="grade<item.grade">未解锁</el-text>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "style/Accomp";
</style>
